<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员信息管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="warning" @click="addUser" style="margin-bottom: 20px">添加管理员</el-button>
    <el-table size="small" :data="userList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <!-- <el-table-column align="center" type="selection" width="60">
      </el-table-column> -->
      <el-table-column align="center" prop="nickName" label="管理员昵称" width="200">
      </el-table-column>
      <el-table-column sortable align="center" prop="phone" label="手机号" width="200">
      </el-table-column>
      <el-table-column sortable align="center" prop="password" label="密码" width="200">
      </el-table-column>
      <el-table-column sortable align="center" prop="level" label="管理员等级" width="200">
        <template slot-scope="scope">
          <div>{{scope.row.level | levelFilter}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="editUser(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageQuery" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="editTitle" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="管理员昵称" prop="nickName">
          <el-input size="small" v-model="editForm.nickName" auto-complete="off" placeholder="请输入管理员昵称"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input size="small" v-model="editForm.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input size="small" v-model="editForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-select v-model="editForm.level" clearable placeholder="请选择管理员等级">
            <el-option v-for="(item, index) in levelList" :key="index" :label="item.label" :value="item.id">{{item.label}}</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editOrAdd ? 'editForm' : 'addForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
export default {
  name:'UserDetail',
  data() {
    return {
      editOrAdd: true, // 编辑 / 新增 => true / false
      userList: [], //管理员列表
      pageQuery: {
        pageNum: 1,
        pageSize: 10
      },
      loading: false, //是显示加载
      editFormVisible: false, // 编辑框是否弹出
      editTitle: '编辑管理员',
      editForm: {
        id: '',
        nickName: '',
        phone: '',
        password: '',
        level: 1
      },
      // rules表单验证
      rules: {
        nickName: [
          { required: true, message: '请输入管理员昵称', trigger: 'blur' }
        ],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        password: [{ required: true, message: '请输入管理员密码', trigger: 'blur' }]
      },
      levelList: [
        {
          label: '品牌商品管理员',
          id: 1
        },
        {
          label: '用户管理员',
          id: 10
        },
        {
          label: '采购和报表管理员',
          id: 100
        },
        {
          label: '商家(超级管理员)',
          id: 1000
        }
      ]
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  filters: {
    levelFilter (val) {
      switch (Number(val)) {
        case 1:
          return '品牌商品管理员'
        case 10:
          return '用户管理员'
        case 100:
          return '采购和报表管理员'
        case 1000: 
          return '商家'
        default:
          return '普通用户'
      }
    }
  },
  created() {
    this.getUserList(this.pageQuery)
  },
  methods: {
    /**
     * 编辑弹框保存管理员修改信息
     */
    submitForm (msg) {
      if (msg === 'editForm') {
        this.$api.auth.discUser(this.editForm).then(res => {
          if (res.code === 200) {
            this.editFormVisible = false
            this.getUserList(this.pageQuery)
          }
        }).catch(err => this.editFormVisible = false)
      } else {
        delete this.editForm.id
        this.$api.auth.addAdmin(this.editForm).then(res => {
          if (res.code === 200) {
            this.editFormVisible = false
            this.getUserList(this.pageQuery)
          }
        })
      }
    },
    /**
     * 获取管理员列表
     */
    getUserList(pageQuery) {
      this.loading = true
      this.$api.auth.getAdminList(pageQuery).then(res => {
        if (res.code === 200) {
          this.userList = res.data.records
          this.loading = false
        }
      }).catch(err => this.loading = false)
    },
    /**
     * 分页插件事件
     */
    callFather(parm) {
      this.pageQuery.pageNum = parm.currentPage
      this.pageQuery.pageSize = parm.pageSize
      this.getUserList(this.pageQuery)
    },
    /**
     * 关闭编辑、增加弹出框
     */
    closeDialog() {
      this.editFormVisible = false
    },
    /**
     * 编辑管理员
     */
    editUser (user) {
      this.editOrAdd = true
      this.editFormVisible = true
      this.editTitle = "编辑管理员"
      this.editForm.id = user.id
      this.editForm.nickName = user.nickName
      this.editForm.phone = user.phone
      this.editForm.password = user.password
      this.editForm.level = user.level
    },
    /**
     * 增加管理员
     */
    addUser () {
      this.editOrAdd = false
      this.editFormVisible = true
      this.editTitle = "添加管理员"
      this.editForm.nickName = ''
      this.editForm.phone = ''
      this.editForm.password = ''
      this.editForm.level = 1
    },
    /**
     * 删除管理员
     */
    deleteUser (index, user) {
      this.$api.auth.deleteUser({id:user.id}).then(res => {
        if (res.code === 200) {
          this.getUserList(this.pageQuery)
        }
      })
    }
  }
}
</script>

<style>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

 
 